<template>
  <div class='searchHistory'>
    <van-cell-group :border="false">
      <van-cell title="搜索历史">
        <template #right-icon>
          <i class="iconfont icon-shanchu"></i>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="seachHistorysView">
      <van-button
        round
        size="small"
        v-for="(historyText, index) of searchHistorys"
        :key="index"
        type="default"
        @click="$emit('setSearchText', historyText)"
      >
        {{ historyText }}
      </van-button>
    </div>
  </div>
</template>

<script>
import { Button, Cell, CellGroup, Icon } from 'vant'

export default {
  name: 'searchHistory',
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon
  },
  props: {
    searchHistorys: {
      required: true,
      type: Array
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style lang='less' scoped>
.searchHistory {
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  padding: 0px 16px;
  /deep/ .van-cell {
    padding: 0;
  }
  .seachHistorysView {
    display: flex;
    flex-wrap: wrap;
  }
  .van-button {
    margin: 10px 4px 0px 4px;
  }
  .van-button--small {
    height: 28px;
    padding: 0px 12px;
    background-color: rgb(224, 224, 224);
    .van-button__text {
      font-size: 14px;
      color: #383838;
    }
  }
}
</style>
